<template>
  <div class="addGoodsAdd">
    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="topTitle"
      :show-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <!-- 点击上面的新增   编辑 -->
      <div class="newAddEdit" style="margin: 0 auto; width: 80%">
        <div class="newAddConfig">
          <el-form
            class="demo-dynamic"
            label-width="150px"
            :model="addGoodsData"
            ref="addGoodsData"
          >
            <el-form-item
              label="奖池名称"
              prop="title"
              :rules="[
                { required: true, message: '请输入奖池名称', trigger: 'blur' },
              ]"
            >
              <el-input
                style="width: 63%"
                v-clear-emoij
                placeholder="请输入奖池名称"
                maxlength="40"
                v-model="addGoodsData.title"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="请选择奖池"
              :rules="[
                { required: true, message: '选择奖池', trigger: 'blur' },
              ]"
            >
              <el-select
                clearable
                placeholder="选择奖池"
                style="width: 63%"
                v-model="addGoodsData.groupId"
              >
                <el-option
                  v-for="item in addGoodsData.gooodsLisr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="可抽奖日期"
              :rules="[
                { required: true, message: '请选择时间', trigger: 'blur' },
              ]"
            >
              <!-- <el-date-picker
                v-model="prizeDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                @change="changeDate"
                end-placeholder="结束日期"
              >
              </el-date-picker> -->
              <el-date-picker
                v-model="prizeDate"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="-"
                 @change="changeDate"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item style="margin-top: 40px">
              <el-button type="danger" @click="closeDialog()">取消</el-button>
              <el-button
                type="primary"
                @click="confirmAddConfig('addGoodsData')"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import requestAxios from "../../../http";
export default {
  name: "luckDrawAdd",
  props: ["addOrEdit"],
  data() {
    return {
      dialogFormVisible: true, //背景遮罩层
      topTitle: "创建奖池",
      prizeDate: [],
      addGoodsData: {
        title: "",
        editTime: "",
        addTime: "",
        gooodsLisr: [
          {
            value: 1,
            label: "入会两家店铺",
          },
          {
            value: 2,
            label: "入会三家店铺",
          },
          {
            value: 3,
            label: "入会四家店铺",
          },
        ],
      },
    };
  },

  methods: {
    //选择时间
    changeDate(value) {
      console.log("改变时间", value);
      if (value && value.length > 1) {
        this.addGoodsData.onlineTime = value[0] + " 00:00:00";
        this.addGoodsData.offlineTime = value[1] + " 23:59:59";
      } else {
        this.addGoodsData.onlineTime = "";
        this.addGoodsData.offlineTime = "";
      }
    },

    //关掉弹窗
    closeDialog() {
      console.log("关闭弹窗");
      this.$parent.addOrEdit = false;
    },
    //新增确定调取接口
    confirmAddConfig(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.addGoodsData.groupId) {
            this.$message.error("请选择奖池信息");
            return;
          }
          let obj = this.addGoodsData;
          console.log(obj, "数据@@@@@@");
          requestAxios
            .fetchPost(
              "/api/v2.1/exchange/store/management/prize/virtualGroup",
              obj,
              {
                headers: {},
              }
            )
            .then((data) => {
              if (data.status == 200 && data.data.success) {
                console.log("新增奖池", data.data);
                //新增成功
                this.$emit("getAddGoodsList");
                this.tip(true, "新增奖池成功!");
                this.$parent.addOrEdit = 0;
              } else {
                console.log("=====新增奖池成功=====", data);
                this.tip(false, data.data.errorMsg || data.data.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          // 获取完善商品信息
          this.$message.error("请完善奖池信息！");
          return false;
        }
      });
    },
    //提示的通用方法
    tip(state, text) {
      if (state) {
        this.$message({
          showClose: true,
          message: text,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: text,
          type: "error",
        });
      }
    },
  },
};
</script>

<style>
</style>